<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"></meta>
    <!--禁止缓存-->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"></meta>
    <title>系统状态检测</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        #results {
            margin-top: 20px;
            line-height: 1.6;
        }
        .result-item {
            padding: 5px;
        }
    </style>
</head>
<body>
<button id="checkBtn">检查各客户系统状态</button>
<div id="results"></div>

<script>
    let linkInfo;

    function startCheckLinks(){
        // 从 /customers 获取所有客户信息
        fetch('customers', {
            method: 'GET'
        }).then(async response => {
            //从response中获取返回的字符串
            linkInfo = await response.json();
            debugger
            await checkLinks();
        })
    }
    async function checkLinks() {
        const container = document.getElementById('results');
        container.innerHTML = ''; // 清空结果

        if(linkInfo){
            // 创建所有项，初始状态为“检测中...”
            for(var name in linkInfo){

                const item = document.createElement('div');
                item.className = 'result-item';
                item.dataset.index = `${name}`;
                item.textContent = `${name} (检测中...)`;
                container.appendChild(item);

            }

            const allPromises = [];
            for(var name in linkInfo){
                const p = checkOneLink(name);
                allPromises.push(p);
            }

            // 并发发起所有请求
            await Promise.allSettled(
                allPromises
            );
        }else{
            container.innerHTML = '没有数据！';
        }
    }

    function checkOneLink(name){
        const link = linkInfo[name];
        const checkUrl = `ping?url=${encodeURIComponent(link)}`
        const p = fetch(checkUrl, {
            method: 'GET'
        }).then(async response => {
            const responseData = await response.json();
            if (responseData.success) {
                updateStatus(name, '正常', true);
            } else {
                updateStatus(name, `无法访问 ( ${responseData.message||response.status})`, false);
            }
        }).catch(error => {
            updateStatus(name, `无法访问(${error})`, false);
        });
        return p;
    }

    function updateStatus(name, status, isSuccess) {
        const item = document.querySelector(`[data-index="${name}"]`);
        if (item) {
            const linkName = name || '未知链接';
            item.textContent = `${linkName} (${status})`;
            item.style.color = isSuccess ? 'green' : 'red';
        }
    }

    // 按钮点击事件
    document.getElementById('checkBtn').addEventListener('click', checkLinks);

    // 页面加载时自动执行检测
    window.addEventListener('load', startCheckLinks);
</script>
</body>
</html>